import React,{PureComponent} from "react";
import "./style.css";

class Album extends PureComponent{
    constructor(props){
        super(props);
        this.clickEvent=this.clickEvent.bind(this);
    }
    clickEvent(){
        this.props.clickHandle({src:this.props.src,trackName:this.props.trackName,index:this.props.index});
    }
    render(){
        const name=this.props.trackName;
        const isActive=this.props.isActive;
        const progress=this.props.progress;
        const isPlaying=this.props.isPlaying;
        return (<li className={isActive&&"active"||""}>
                <span className="item-num">{this.props.index}</span>
            <p title={name} className="item-name">{name}</p>
            <p className="album-name">{this.props.albumName}</p>
            <span className="playBtn iconfont"  onClick={this.clickEvent} ><div className={isPlaying&&"icon-zanting"||"icon-bofang"}></div></span>
            {/* <img className="playBtn" src={isPlaying&&pauseBtn||playBtn} alt="" onClick={this.clickEvent} /> */}
            {isActive&&<div className="progressBar" style={{transform:`translateX(-${100-progress}%)`}}>{}</div>}
        </li>);
    }
}

export default Album;